<template>
  <div class="spatial-analysis-config">
    <div class="left">
      <div class="top-btn">
        <span>配置列表</span>
        <a-icon
          title="添加"
          type="plus-circle"
          class="icon"
          @click="addConfig(1)"
        />
      </div>
      <a-table
        bordered
        :columns="columns"
        :data-source="dataSource"
        :rowClassName="setRowClassName"
        :customRow="customRow"
        :pagination="false"
      >
        <template slot="operate" slot-scope="text">
          <a-icon
            title="删除"
            type="delete"
            class="m-r-sm icon c-red"
            @click.stop.prevent="beforeDel(text, 1)"
          />
        </template>
      </a-table>
    </div>
    <div class="center">
      <div v-if="selConfig.GUID">
        <div class="top-btn">
          <span>关联机构列表</span>
          <span>
            <a-icon
              title="添加"
              type="plus-circle"
              class="icon"
              @click="
                addConfig(2)
              "
            />
          </span>
        </div>
        <a-table
          bordered
          :columns="columns"
          :data-source="dataSource2"
          :rowClassName="setRowClassName2"
          :customRow="customRow2"
          :pagination="false"
        >
          <template slot="operate" slot-scope="text">
            <a-icon
              title="删除"
              type="delete"
              class="m-r-sm icon c-red"
              @click.stop.prevent="beforeDel(text, 2)"
            />
          </template>
        </a-table>
      </div>
    </div>
    <a-modal
      title="添加配置项"
      destroyOnClose
      :maskClosable="false"
      :visible="visible"
      v-if="visible"
      :width="520"
      @cancel="cancel"
    >
      <a-form-model
        ref="ruleForm"
        v-if="type === 1"
        :rules="rules"
        :model="addItem"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-form-model-item label="选择域" prop="realm">
          <a-select v-model="addItem.realm" @change="changeRealm">
            <a-select-option v-for="item in realms" :key="item.GUID" :value="item.GUID">
              {{ item.NAME }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="选择机构" prop="org">
          <a-select v-model="addItem.org" @change="changeOrg">
            <a-select-option v-for="item in orgs" :key="item.GUID" :value="item.GUID">
              {{ item.SHORTNAME }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="选择关联机构" prop="relateOrg">
          <a-select v-model="addItem.relateOrg">
            <a-select-option v-for="item in relateOrgs" :key="item.GUID" :value="item.GUID">
              {{ item.SHORTNAME }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
      <a-form-model
        ref="ruleForm"
        v-if="type === 2"
        :rules="rules"
        :model="addItem"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-form-model-item label="选择关联机构" prop="relateOrg">
          <a-select v-model="addItem.relateOrg">
            <a-select-option v-for="item in relateOrgs" :key="item.GUID" :value="item.GUID">
              {{ item.SHORTNAME }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
      <template slot="footer">
        <div style="text-align: center">
          <a-button type="primary" @click="ok">确定</a-button>
        </div>
      </template>
    </a-modal>
  </div>
</template>

<script>
import sqlService from '@/api/sqlService'
import dynamicConfigService from '@/api/dynamicConfigService'

export default {
  name: 'OrgRelateConfig',
  data () {
    return {
      selConfig: {},
      columns: [
        {
          title: '机构名称',
          dataIndex: 'ORGNAME',
          align: 'center'
        },
        {
          title: '操作',
          align: 'center',
          scopedSlots: { customRender: 'operate' },
          width: '100px'
        }
      ],
      selCen: {},
      dataSource: [],
      dataSource2: [],
      visible: false,
      type: 0,
      addItem: {},
      rules: {
        realm: [{ required: true, message: '请选择域' }],
        org: [{ required: true, message: '请选择机构' }],
        relateOrg: [{ required: true, message: '请选择关联机构' }]
      },
      realms: [],
      orgs: [],
      relateOrgs: []
    }
  },
  methods: {
    setRowClassName (record, index) {
      return this.selConfig.GUID === record.GUID ? 'selected' : ''
    },
    setRowClassName2 (record, index) {
      return this.selCen.ID === record.ID ? 'selected' : ''
    },
    customRow (record) {
      return {
        on: {
          click: () => {
            this.selConfig = record
            this.selCen = {}
            this.getRelateOrg()
          }
        }
      }
    },
    customRow2 (record) {
      return {
        on: {
          click: () => {
            this.selCen = record
          }
        }
      }
    },
    addConfig (type) {
      this.type = type
      this.visible = true
      if (type === 2) {
        this.addItem.org = this.selConfig.GUID
        this.changeOrg()
      }
    },
    async beforeDel (record, type) {
      this.$confirm({
        title: '提示',
        content: '确认执行删除操作，删除后不可恢复！',
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          this.delConfig(record, type)
        }
      })
    },
    async delConfig (record, type) {
      if (type === 1) {
        const params = { orgGuid: record.GUID }
        await dynamicConfigService.delOrgRelateGroupConfig(params)
      } else {
        const params = { confId: record.ID }
        await dynamicConfigService.delOrgRelateConfig(params)
      }
      this.getOrg()
      this.getRelateOrg()
    },
    async getAllRealm () {
      const sqlParam = {
        sqlConfigName: 'getAllRealmConfig'
      }
      const d = await sqlService.pageQuery(sqlParam)
      this.realms = d.rows
    },
    async getOrg () {
      const sqlParam = {
        sqlConfigName: 'getOrgConfigGroup'
      }
      const d = await sqlService.pageQuery(sqlParam)
      this.dataSource = d.rows
    },
    async getRelateOrg () {
      if (this.selConfig.GUID) {
        const sqlParam = {
          sqlConfigName: 'getOrgConfigList',
          params: {
            orgguid: this.selConfig.GUID
          }
        }
        const d = await sqlService.pageQuery(sqlParam)
        this.dataSource2 = d.rows
        if (d.rows.length === 0) {
          this.selConfig = {}
        }
      }
    },
    async ok () {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.visible = false
          const findOrgName = (guid) => {
            const org = this.orgs.filter(item => {
              return item.GUID === guid
            })
            const relateOrg = this.relateOrgs.filter(item => {
              return item.GUID === guid
            })
            if (org.length) {
              return org[0].SHORTNAME
            }
            if (relateOrg.length) {
              return relateOrg[0].SHORTNAME
            }
            return ''
          }
          const data = {
            orgGuid: this.addItem.org,
            orgName: (this.type === 1 ? findOrgName(this.addItem.org) : this.selConfig.ORGNAME),
            relOrgGuid: this.addItem.relateOrg,
            relOrgName: findOrgName(this.addItem.relateOrg)
          }
          await dynamicConfigService.saveOrgRelateConfig([data])
          this.addItem = {}
          if (this.type === 1) {
            this.getOrg()
            this.getRelateOrg()
          } else {
            this.getRelateOrg()
          }
        }
      })
    },
    cancel () {
      this.visible = false
      this.addItem = {}
    },
    async changeRealm () {
      this.$set(this.addItem, 'org', '')
      this.$set(this.addItem, 'relateOrg', '')
      this.orgs = []
      this.relateOrgs = []
      const sqlParam = {
        sqlConfigName: 'getRealmOrgConfig',
        params: {
          realmguid: this.addItem.realm
        }
      }
      const d = await sqlService.pageQuery(sqlParam)
      this.orgs = d.rows
    },
    async changeOrg () {
      this.$set(this.addItem, 'relateOrg', '')
      this.relateOrgs = []
      const sqlParam = {
        sqlConfigName: 'getRelateOrgConfig',
        params: {
          orgguid: this.addItem.org
        }
      }
      const d = await sqlService.pageQuery(sqlParam)
      this.relateOrgs = d.rows
    },
    init () {
      this.getAllRealm()
      this.getOrg()
    }
  },
  async mounted () {
    this.init()
  }
}
</script>

<style scoped lang="less">
.spatial-analysis-config {
  height: 100%;
  display: flex;
  background-color: #ffffff;
  padding: 10px;
  .left {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .center{
    flex: 1;
    height: 100%;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
  }
  .top-btn {
    background: #fafafa;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5px;
    font-weight: 700;
    font-size: 16px;
    height: 32px;
    flex-shrink: 0;
  }
  ::-webkit-scrollbar {
    display: none;
  }
  .ant-table-wrapper {
    overflow: auto;
  }
  .icon {
    color: #409eff;
    margin-left: 5px;
    &:first-child{
      margin-left: 0;
    }
  }
  .c-red {
    color: #ff0000;
  }
}
</style>
